<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="商品列表" name="first">
      <div class="common-layout">
        <el-container>
          <el-header style="height: 50px; width: 100%">
            <el-button @click="jumpInsert">发布商品</el-button>
            <el-button @click="UpdateState(1)">批量上架</el-button>
            <el-button @click="UpdateState(0)">批量下架</el-button>
            <el-button @click="del">删除</el-button>
            <el-checkbox label="已售完" size="large" style="margin-left: 750px" />
            <el-select v-model="Product.commoditystatus" placeholder="全部状态" @change="getlist()" style="width: 100px">
              <el-option label="已上架" :value="1" />
              <el-option label="已下架" :value="0" />
              <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" /> -->
            </el-select>
            <el-input v-model="Product.productname" style="width: 150px" placeholder="输入商品名称" clearable />
          </el-header>
          <el-main>
            <el-table ref="tableRef" :data="tableData" stripe style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="productName" label="商品名稱" />
              <el-table-column prop="commodityType" label="商品类型" />
              <el-table-column prop="sellingPrice" label="销售价" />
              <el-table-column prop="surplusStock" label="实际销量/剩余库存" />
              <el-table-column prop="sort" label="排序" />
              <el-table-column prop="commodityStatus" label="商品状态">
                <template #default="{ row }">
                  <el-switch v-model="row.commodityStatus" class="ml-2" style="--el-switch-on-color: #13ce66" />
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="120">
                <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="jumpUpdate(row)"> 编辑 </el-button>
                  <el-button link type="primary" size="small">复制</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div>
              <el-pagination v-model:current-page="Product.index" v-model:page-size="Product.size" :background="true"
                layout="total, prev, pager, next, jumper" :total="Product.totalcount" />
            </div>
          </el-main>
        </el-container>
      </div>
    </el-tab-pane>
    <el-tab-pane label="预约列表" name="second"></el-tab-pane>
    <el-tab-pane label="聚合商品" name="third"></el-tab-pane>
    <el-tab-pane label="商品设置" name="fourth"></el-tab-pane>
    <el-tab-pane label="商品标签" name="fourth"></el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { getListProduct, DeleteProduct, UpdateProductstatues } from "@/api/index";
import router from "@/router";

const tableData = ref([]);
//查询条件
const Product = ref({
  productname: "",
  commoditystatus: null,
  index: 1,
  size: 10,
  totalpage: 1,
  totalcount: 1
});
//分页监听
watch(Product.value, () => {
  getlist()
})
//查询显示
const getlist = () => {

  getListProduct(Product.value).then((res: any) => {
    tableData.value = res.data.list;
    Product.value.totalcount = res.data.totalCount

  });
};
onMounted(() => {
  getlist();
});
const tableRef = ref<InstanceType<typeof ElTable>>()
//删除
const del = () => {
  ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 获取选中的行数据
      const selectedRows = tableRef.value?.getSelectionRows()
      if (!selectedRows || selectedRows.length === 0) {
        alert('请选择要删除的商品')
        return
      }
      // 提取要删除的商品ID
      const ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段


      DeleteProduct(ids.toString()).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          getlist()
        }
        else {
          ElMessage.error("删除失败")
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}
//更新
const UpdateState = (value: number) => {
  // 获取选中的行数据
  const selectedRows = tableRef.value?.getSelectionRows()
  if (!selectedRows || selectedRows.length === 0) {
    alert('请选择要更新的商品')
    return
  }
  // 提取要更新的商品ID
  const ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段
  UpdateProductstatues(ids, value).then(res => {
    if (res.code == 200) {
      ElMessage.success("更新成功")
      getlist()
    }
    else {
      ElMessage.error("更新失败")
    }
  })

}
//跳转添加页面
const jumpInsert = () => {
  router.push("/InsertCommodity");
};
//跳转修改页面
const jumpUpdate = (value: any) => {
  router.push({
    name: 'UpdateCommodity',
    query: {
      id: value.id
    }
  });
};
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>